{{ define "content" }}

{{ if .components }}
<div class="row">
    <div class="col-md-12 col-sm-12 col-xs-12">
        <div class="x_panel">
            <div class="x_content">
                <table class="table table-striped datatable dt-responsive nowrap" style="width:100%">
                    <thead>
                        <tr>
                            <th>{{ i18n "ID" . }}</th>
                            <th>{{ i18n "Type" . }}</th>
                            <th>{{ i18n "Name" . }}</th>
                            <th>{{ i18n "State" . }}</th>
                            <th>{{ i18n "Actions" . }}</th>
                        </tr>
                    </thead>
                    <tbody>
                        {{ range $component := .components }}
                        <tr>
                            <td>{{ $component.ID }}</td>
                            <td>{{ $component.Type }}</td>
                            <td>{{ $component.Name }}</td>
                            <td>{{ $component.StateFormat }}</td>
                            <td class="btn-group text-right" role="group">
                                {{ if or (ne $component.CommandTopic.String "") (eq $component.ID $.Bind.Config.IPAddressSensorID) }}
                                    {{ if ne $component.CommandTopic.String ""}}
                                        {{ if eq $component.Type.String "light" }}
                                            <a href="{{ $.Request.URL.Path }}?action=component&id={{ $component.ID }}" class="btn btn-info btn-icon btn-xs">
                                                <i class="glyphicon glyphicon-eye-open" title="{{ i18n "Details" $ }}"></i>
                                            </a>
                                        {{ end }}

                                        {{ if $.Bind.Meta.Status.IsStatusOnline }}
                                            {{ if or (eq $component.Type.String "light") (eq $component.Type.String "switch") }}
                                                {{ if eq (printf "%v" $component.StateFormat) "ON" }}
                                                    <a href="{{ $.Request.URL.Path }}?action=command&id={{ $component.ID }}&cmd=OFF" class="btn btn-success btn-icon btn-xs">
                                                        <i class="glyphicon glyphicon-stop" title="{{ i18n "Switch off" $ }}"></i>
                                                    </a>
                                                {{ else }}
                                                    <a href="{{ $.Request.URL.Path }}?action=command&id={{ $component.ID }}&cmd=ON" class="btn btn-success btn-icon btn-xs">
                                                        <i class="glyphicon glyphicon-play" title="{{ i18n "Turn on" $ }}"></i>
                                                    </a>
                                                {{ end }}
                                            {{ end }}
                                        {{ end }}
                                    {{ end }}

                                    {{ if and $.Bind.Meta.Status.IsStatusOnline (eq $component.ID $.Bind.Config.IPAddressSensorID) }}
                                        <a href="http://{{ $component.State }}/" class="btn btn-info btn-icon btn-xs" target="_blank">
                                            <i class="glyphicon glyphicon-globe" title="{{ i18n "Open Web server" $ }}"></i>
                                        </a>
                                    {{ end }}

                                {{ end }}

                                {{ if ne $component.DiscoveryTopic.String ""}}
                                    <a href="{{ $.Request.URL.Path }}?action=delete&id={{ $component.ID }}" class="btn btn-danger btn-icon btn-xs">
                                        <i class="glyphicon glyphicon-trash" title="{{ i18n "Remove" $ }}"></i>
                                    </a>
                                {{ end }}
                            </td>
                        </tr>
                        {{ end }}
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>
{{ end }}

{{ end }}

{{ define "head" }}
    {{ staticHTML (staticURL "/dashboard/assets/vendors/datatables.net-bs/css/dataTables.bootstrap.min.css" false) }}
    {{ staticHTML (staticURL "/dashboard/assets/vendors/datatables.net-responsive-bs/css/responsive.bootstrap.min.css" false) }}
{{ end }}

{{ define "js" }}
    {{ staticHTML (staticURL "/dashboard/assets/vendors/datatables.net/js/jquery.dataTables.min.js" false) }}
    {{ staticHTML (staticURL "/dashboard/assets/vendors/datatables.net-bs/js/dataTables.bootstrap.min.js" false) }}
    {{ staticHTML (staticURL "/dashboard/assets/vendors/datatables.net-responsive/js/dataTables.responsive.min.js" false) }}
    {{ staticHTML (staticURL "/dashboard/assets/vendors/datatables.net-responsive-bs/js/responsive.bootstrap.min.js" false) }}
{{ end }}
